<template>
  <div class="blog-box">
    <div class="blog-title">{{ blog.title }}{{ blog.id }}</div>
    <div class="blog-attribute">
      <div>发布于：{{ blog.createTime }}</div>
      <div>标签：<span v-for="(item,index) in blog.tagsArr">{{item.name}}{{ index===(blog.tagsArr.length-1)?'':','}}</span></div>
      <div>访问：{{ blog.visited }}</div>
    </div>
    <div v-if="blog.content" class="blog-content" v-html="blog.content"></div>
    <Comments :blogId="id"></Comments>
  </div>
</template>

<script>
import Comments from '../components/Comments'
export default {
  name: 'BlogContent',
  components:{
    Comments,
  },
  data(){
    return {
      id: '',
      blog: {
        id: '',
        title: '',
        content: '',
        createTime: '',
        visited: 0,
        tags: ''
      }
    }
  },
  created() {
    this.id = Number(this.$route.query.id)
     this.getBlogInfo()
  },
  mounted(){
    this.updateVisited()
  },
  methods: {
    // 每次进行挂载就进行接口调用
    updateVisited(){
         this.$axios.post('/visited',{id: this.id}).then(val=>{
        })
    },
    //
    getBlogInfo(){
       this.$axios.post('/getBlogInfo',{id: this.id}).then(val=>{
        if(val.status ===200){
          val.data.createTime = this.dayjs(val.data.createTime).format('YYYY-MM-DD HH:mm:ss')
          this.blog = val.data
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.blog-title{
  color:#000;
  text-align: center;
  font-size: 20px;
  font-weight: 300;
}
.blog-attribute{
  display: flex;
  justify-content: flex-end;
  &>div{
    margin-right: 20px;
  }
}
.blog-content {
  white-space: pre-wrap;
}
</style>
